<template>
  <div class="flex column module-inner">
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      设备分布
    </div>
    <div class="module-content flex column">
      <div class="sub-title flex-center">
        <div class="flex list-item">
          <div class="text1 flex-center">名次</div>
          <div class="text2 flex-center">省份</div>
          <div class="text3 flex-center">设备数量</div>
        </div>
      </div>
      <ul class="list flex">
        <el-scrollbar
          :vertical="false"
          :wrap-style="[{ 'overflow-x': 'hidden' }]"
          style="height: 100%; width: 100%"
        >
          <div class="scroll-inner">
            <li
              v-for="item in moduleData"
              :key="item.province"
              class="list-item flex"
            >
              <div class="text1 flex-center">
                <span :class="`ranking-${item.ranking}`" class="flex-center">{{
                    item.ranking
                  }}</span>
              </div>
              <div class="text2 flex-center">{{ item.province }}</div>
              <div class="text3 flex-center">{{ item.count }}</div>
            </li>
          </div>
        </el-scrollbar>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EquipmentDistribution',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.module-content {
  overflow: hidden;
  flex: 230;
  @include vw(14);

  background: url("/image/module1-title-bg.png") no-repeat center;
  background-size: 100% 100%;
}

.sub-title {
  @include vw(16);
  flex: 40;
  color: #00ccff;
}

.list {
  flex: 190;
  list-style: none;
  width: 100%;

  .list-item {
    height: px2vw(28);
  }
}

.list-item {
  width: 100%;

  .text1 {
    flex: 3;
  }

  .text2 {
    flex: 5;
  }

  .text3 {
    flex: 3;
  }
}

.scroll-inner {
  > .list-item {
    .text1 span {
      height: px2vw(28);
      width: px2vw(28);
      background: url("/image/level3.png") no-repeat center;
      background-size: 100% 100%;

      &.ranking-1 {
        background: url("/image/level1.png") no-repeat center;
        background-size: 100% 100%;
      }

      &.ranking-2 {
        background: url("/image/level2.png") no-repeat center;
        background-size: 100% 100%;
      }

      &.ranking-3 {
        background: url("/image/level2.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
